function createGrid(grid = [1, 1], gap = [0, 0]) {
  if (grid.length < 2) return;
  const [row, col] = grid;
  const [rowGap, columnGap] = gap;
  const className = `sullivan-grid sullivan-grid-${grid.join("x")}`;
  const rowStyle = `repeat(${row}, calc((100% - ${rowGap * (row - 1)}px) / ${row}))`;
  const colStyle = `repeat(${col}, calc((100% - ${columnGap * (col - 1)}px) / ${col}))`;
  const $grid = $(`<div class="${className}" style="display: grid;" ></div>`);

  $grid.css({
    "grid-template-rows": rowStyle,
    "grid-template-columns": colStyle,
    "grid-row-gap": rowGap,
    "grid-column-gap": columnGap,
  });

  for (let i = 0; i < row * col; i++) {
    const $gridItem = $(
      `<div class="sullivan-grid-item" data-index="${ i + 1 }"></div>`
    );
    $grid.append($gridItem);
  }
  return $grid;
}

function createGridByArray([row, col] = [1, 1], array) {
  const className = `sullivan-grid sullivan-grid-${row}x${col}`;
  const rowStyle = `repeat(${row}, 1fr)`;
  const colStyle = `repeat(${col}, 1fr)`;
  const $grid = $(`<div class="${className}" style="display: grid;" ></div>`);
  let tempAreas = ``

  array.map((area, index) => {
    const $item = $(
      `<div class="sullivan-grid-item" style="grid-area: ${area}"></div>`
    );

    if (index % col || index === 0) {
      tempAreas += `${area} `
    } else {
      tempAreas += `" "${area} `
    }

    $grid.append($item);
  })

  console.log({
    "grid-template-rows": rowStyle,
    "grid-template-columns": colStyle,
    "grid-template-areas": `"${tempAreas}"`
  })
  $grid.css({
    "grid-template-rows": rowStyle,
    "grid-template-columns": colStyle,
    "grid-template-areas": `"${tempAreas}"`
  });

  return $grid;
}

const cursor = {
  set (cursor) {
    $(document.body).css('cursor', cursor + '-resize')
  },
  remove () {
    $(document.body).css('cursor', 'initial')
  }
}

class Coordinate {
  x = 0;
  y = 0;

  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  update (x, y) {
    this.x = x;
    this.y = y;
  }
}

class Size {
  top;
  right;
  bottom;
  left;
  initW;
  initH;
  width;
  height;
  constructor($item) {
    this.initW = $item.attr('data-w');
    this.initH = $item.attr('data-h');

    this.width = $item.width()
    this.height = $item.height()

    console.log($item.attr('data-w'), $item.attr('data-h'))
    if (!this.initW) {
      this.initW = +this.width
      $item.attr('data-w', this.initW)
    }
    if (!this.initH) {
      this.initH = +this.height
      $item.attr('data-h', this.initH)
    }

    console.log(this.width, this.height, this.initW, this.initH)
    this.update($item)
  }

  update = ($item) => {
    const { top, left } = $item.offset();
    this.top = top;
    this.right = left + this.width;
    this.bottom = top + this.height;
    this.left = left;
  }
}











